<template>
  <div>
    <vxe-toolbar ref="xToolbar" :loading="loading">
          <template #buttons>
            <vxe-button status="primary" content="临时新增" @click="insertEvent"></vxe-button>
            <vxe-button status="warning" content="临时删除" @click="removeSelectEvent"></vxe-button>
            <vxe-button status="danger" content="直接删除" @click="deleteSelectEvent"></vxe-button>
            <vxe-button content="提交（将临时操作持久化）" @click="saveEvent"></vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          border
          resizable
          show-overflow
          keep-source
          ref="xTable"
          height="500"
          :loading="loading"
          :data="tableData"
          :edit-rules="validRules"
          :edit-config="{trigger: 'click', mode: 'row', showUpdateStatus: true, showInsertStatus: true}">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column field="name" title="Name" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="nickname" title="Nickname" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.nickname" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="Sex" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ formatSex(row.sex) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.sex" type="text" :options="sexList" transfer></vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="amount" title="Amount" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.amount" type="float" :digits="2"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="updateDate" title="Date" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.updateDate" type="date"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="240">
            <template #default="{ row }">
              <vxe-button status="warning" content="临时删除" @click="removeRowEvent(row)"></vxe-button>
              <vxe-button status="danger" content="直接删除" @click="deleteRowEvent(row)"></vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        nicknameOptions: [
          { data: '' }
        ],
        tableData: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
          { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
          { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
        ],
        sexList: [
          { label: '女', value: '0' },
          { label: '男', value: '1' }
        ],
        validRules : []
      }
    },
    methods: {
      formatSex(value) {
        if (value === '1') {
          return '男'
        }
        if (value === '0') {
          return '女'
        }
        return ''
      },
      enterFilterEvent({ column, $panel }) {
        console.log(`${column.title} 筛选回车事件`)
        $panel.confirmFilter()
      },
      nameChangeEvent({ column }) {
        console.log(`${column.title} 触发 input 事件`)
      },
      roleChangeEvent({ column }) {
        console.log(`${column.title} 触发 input 事件`)
      },
      roleFocusEvent({ column }) {
        console.log(`${column.title} 触发 focus 事件`)
      },
      sexChangeEvent({ column }) {
        console.log(`${column.title} 触发 change 事件`)
      },
      dateChangeEvent({ column }) {
        console.log(`${column.title} 触发 change 事件`)
      },
      checkboxChangeEvent() { }
    }
  }
</script>

<style scoped>
  .my-downpanel1 {
    background-color: #fff;
    border: 1px solid #e8eaec;
  }

  .page-left {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
</style>
